<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button onclick="requireNet()">点击获取同源下面的数据</button>
</body>
<script>
    function requireNet(){
        //发起网络请求--------需要借助xmlhttprequired
        //1.实例化对象；
        try{
            var xml=new XMLHttpRequest();
        }catch(e){
            alert("您的浏览器版本太低请升级")
        }

        //2、建立连接；


        xml.open("get","package.json",true);
        /* （1）如果是get请求方式，那么参数拼接到url后面，第一个参数和url拼接时以？相连接，之后再拼接参数，都是以&拼接
        * “http://baidu.com?user=用户输入的值&paaa=用户驶入的密码
        * （2）get请求能携带1024个字节，基本都是在请求头里面
        * （3）post，参数不能拼接到url后面  url定义在请求头里面，参数定义在请求体里面   如果在XMLHttpRequest 在send里面定义    如果在jq里面，参数在data对应的value里面*/



        //3、发送
        //如果以post方式进行网络请求，那么需要设置请求头的一些配置信息
        //xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        //xml.send("user"+v1+"&pAAA="+v2);
        xml.send();

        //4、实时监测发送的状态以及数据返回的状态；
        //console.log(xml);
        xml.onreadystatechange=function(){
            //如果发生改变，采取一定的处理；
            //发送的状态：0 1 2 3 4
            if(xml.readyState===4&&xml.status===200){
                var obj=JSON.parse(xml.responseText);
                var ulEle=document.createElement("ul");
                for(var x in obj){
                    var liEle=document.createElement("li");
                    liEle.innerHTML=obj[x];
                    ulEle.appendChild(liEle);
                }
                document.body.appendChild(ulEle);
            }
        }
    }

</script>
</html>